/* 背景样式 */
body {
  margin: 0;
  padding: 0;
  background-image: url('../img/bk.jpg');
  background-size: cover; /* 背景图片覆盖整个页面 */
  background-repeat: no-repeat; /* 防止背景图片重复 */
  background-position: center center; /* 背景图片居中 */
  width: 100%;
  height: 100vh;
}


/* 苹果树容器 */
#trees-container .tree-group {
  position: absolute;
  bottom: 0;
}

/* 苹果树公共样式 */
.tree {
  height: 100%;
  z-index: 777;
}

.apple {
  position: absolute;
  z-index: 888;
  width: 10%;
  transition: transform 1s ease-out;
}

/* 树的位置 */
.group1 {
  left: 10%;
  height: 80%;
}

.group2 {
  left: 30%;
  height: 95%;
}

.group3 {
  left: 60%;
  height: 60%;
}

/* 苹果的位置 */
.group1 .apple1,
.group2 .apple,
.group3 .apple1 {
  top: 40%;
  left: 30%;
}

.group1 .apple2,
.group2 .apple2,
.group3 .apple2 {
  top: 25%;
  left: 35%;
}

.group1 .apple3,
.group2 .apple3,
.group3 .apple3 {
  top: 35%;
  left: 50%;
}

.group1 .apple4,
.group2 .apple4,
.group3 .apple4 {
  top: 37%;
  left: 65%;
}

.group1 .apple5,
.group2 .apple5,
.group3 .apple5 {
  top: 30%;
  left: 75%;
}

/* 苹果掉落样式 */
.fall {
  /* css 只能移动固定距离，效果不好 -> 使用 js 动态计算位置实现掉落效果 */
  /* transform: translateY(30vh); */
}


/* 分数展示区域 */
#score-container {
  /* border: 3px solid red; */
  /* width: 120px; */
  height: 40px;
  margin: 10px;
  padding: 20px;
  color: red;
  font-size: 26px;
}


/* 剩余游戏时间展示区域 */
#time-container {
  /* width: 120px; */
  height: 40px;
  margin: 10px;
  padding: 20px;
  color: red;
  font-size: 26px;
}


/* 操作区域 */
#option-container {
  position: absolute;
  bottom: 5%;
  left: 45%;
  width: 10%;
  height: 5%;
}

/* 开始按钮 */
.start-btn {
  width: 100%;
  height: 100%;
  background-color: orange;
  border: 1px solid rgb(255, 255, 255);
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.1s;
  outline: none;
  z-index: 999;
}

.start-btn:active {
  background-color: #FF8C00;
  transform: scale(0.95); /* 按下时缩小效果 */
}

.start-btn:hover {
  background-color: #FFB347;
}